﻿<template>
  <s-layout title="体验详情" navbar="normal" :navbarStyle="{ color: '#333' }">
    <view class="detail-container">
      <view v-if="loading" class="loading-container">
        <text class="loading-text">加载中...</text>
      </view>
      
      <view v-else-if="error" class="error-container">
        <text class="error-text">{{ error }}</text>
        <view class="retry-btn" @tap="loadDetail">
          <text>重试</text>
        </view>
      </view>
      
      <view v-else-if="!detail" class="empty-container">
        <text class="empty-text">体验不存在</text>
      </view>
      
      <view v-else class="detail-content">
        <view class="hero-section">
          <image 
            v-if="detail.image" 
            :src="detail.image" 
            mode="aspectFill"
            class="hero-image"
          />
          <view v-else class="hero-placeholder">
            <text class="placeholder-emoji">🎯</text>
          </view>
        </view>
        
        <view class="content-section">
          <view class="title-section">
            <text class="main-title">{{ detail.name }}</text>
            <view class="title-actions">
              <text class="type-badge">{{ getTypeText(detail.type) }}</text>
              <view class="follow-btn" :class="{ followed: detail.followed === 1 }" @tap="toggleFollow">
                <text class="follow-icon">{{ detail.followed === 1 ? '❤️' : '🤍' }}</text>
                <text class="follow-text">{{ detail.followed === 1 ? '已关注' : '关注' }}</text>
              </view>
            </view>
          </view>
          
          <view class="address-section" v-if="detail.address">
            <view class="address-item">
              <text class="address-icon">📍</text>
              <text class="address-text">{{ detail.address }}</text>
            </view>
            <view class="direction-btn" @tap="openMap">
              <text>导航</text>
            </view>
          </view>
          
          <view class="contact-section">
            <text class="section-title">联系方式</text>
            <view class="contact-card">
              <view class="contact-info">
                <view class="contact-item" v-if="detail.contact">
                  <text class="contact-label">联系人:</text>
                  <text class="contact-value">{{ detail.contact }}</text>
                </view>
              </view>
              <view class="contact-actions">
                <view class="contact-btn" @tap="callPhone(detail.telephone)" v-if="detail.telephone">
                  <text class="contact-icon">📞</text>
                  <text class="contact-text">电话</text>
                </view>
              </view>
            </view>
          </view>
          
          
          <view class="rich-content" v-if="detail.content">
            <text class="section-title">详细介绍</text>
            <mp-html :content="detail.content" />
          </view>
          
          <view class="gallery-section" v-if="detail.images && detail.images.length > 1">
            <text class="section-title">相册</text>
            <view class="image-grid">
              <image 
                v-for="(image, index) in detail.images" 
                :key="index"
                :src="image" 
                mode="aspectFill"
                class="gallery-image"
                @tap="previewImage(image, detail.images)"
              />
            </view>
          </view>
        </view>
        
        <view class="bottom-actions">
          <view class="action-btn secondary" @tap="callPhone(detail.telephone)">
            <text>电话咨询</text>
          </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import sheep from '@/sheep';

const loading = ref(false);
const error = ref('');
const detail = ref(null);

const props = defineProps({
  id: {
    type: String,
    required: true
  }
});

const loadDetail = async () => {
  try {
    loading.value = true;
    error.value = '';
    
    const res = await sheep.$api.noAuth.getHomeDetail('5', props.id);
    
    if (res) {
      detail.value = {
        ...res,
        image: getFirstValidImage(res.pic),
        images: getAllImages(res.pic)
      };
    } else {
      detail.value = null;
    }
  } catch (err) {
    error.value = '加载失败，请稍后重试';
    detail.value = null;
  } finally {
    loading.value = false;
  }
};

const getFirstValidImage = (pic) => {
  if (!pic || pic === 'null' || pic === '') return null;
  return pic.trim();
};

const getAllImages = (pic) => {
  if (!pic || pic === 'null' || pic === '') return [];
  return [pic.trim()];
};

const getTypeText = (type) => {
  const typeMap = {
    1: '传统体验',
    2: '现代体验',
    3: '文化体验',
    4: '技艺体验'
  };
  return typeMap[type] || '未知类型';
};

const callPhone = (phone) => {
  if (!phone) return;
  uni.makePhoneCall({
    phoneNumber: phone
  });
};

const openMap = () => {
  if (!detail.value?.address) return;
  uni.openLocation({
    latitude: 0,
    longitude: 0,
    name: detail.value.name,
    address: detail.value.address
  });
};

const previewImage = (current, urls) => {
  uni.previewImage({
    current,
    urls
  });
};

const showBooking = () => {
  uni.showToast({
    title: '预约功能待开发',
    icon: 'none'
  });
};

const toggleFollow = async () => {
  if (!detail.value?.id) return;
  
  try {
    if (detail.value.followed === 1) {
      // 取消关注
      await sheep.$api.noAuth.unfollowContent({
        type: 5,
        dataId: detail.value.id
      });
    } else {
      // 关注
      await sheep.$api.noAuth.followContent({
        type: 5,
        dataId: detail.value.id
      });
    }
    // 切换关注状态
    detail.value.followed = detail.value.followed === 1 ? 0 : 1;
  } catch (error) {
    sheep.$helper.toast('操作失败，请稍后重试');
  }
};

onMounted(() => {
  loadDetail();
});
</script>

<style lang="scss" scoped>
$primary-color: #8B4513;
$secondary-color: #DAA520;
$text-dark: #333;
$text-light: #666;

.detail-container {
  min-height: 100vh;
  background: #f8f9fa;
  padding-bottom: 140rpx;
}

.loading-container,
.error-container,
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  
  .loading-text,
  .error-text,
  .empty-text {
    font-size: 28rpx;
    color: $text-light;
    margin-bottom: 20rpx;
  }
  
  .retry-btn {
    padding: 16rpx 32rpx;
    background: $primary-color;
    color: white;
    border-radius: 24rpx;
    font-size: 26rpx;
  }
}

.detail-content {
  .hero-section {
    width: 100%;
    height: 500rpx;
    
    .hero-image {
      width: 100%;
      height: 100%;
    }
    
    .hero-placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      
      .placeholder-emoji {
        font-size: 80rpx;
      }
    }
  }
  
  .content-section {
    background: white;
    padding: 40rpx;
    
    .title-section {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30rpx;
      
      .main-title {
        font-size: 40rpx;
        font-weight: bold;
        color: $text-dark;
        flex: 1;
      }
      
      .title-actions {
        display: flex;
        align-items: center;
        gap: 20rpx;
        
        .type-badge {
          padding: 10rpx 20rpx;
          background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
          color: white;
          border-radius: 20rpx;
          font-size: 24rpx;
        }
        
        .follow-btn {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 16rpx 24rpx;
          border-radius: 40rpx;
          border: 2rpx solid #e0e0e0;
          background: white;
          transition: all 0.3s ease;
          
          .follow-icon {
            font-size: 32rpx;
            margin-bottom: 4rpx;
          }
          
          .follow-text {
            font-size: 22rpx;
            color: $text-light;
          }
          
          &.followed {
            border-color: #ff4d4f;
            background: #fff2f2;
            
            .follow-text {
              color: #ff4d4f;
            }
          }
          
          &:active {
            transform: scale(0.95);
          }
        }
      }
    }
    
    .address-section {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      padding: 30rpx;
      background: #f8f9fa;
      border-radius: 16rpx;
      
      .address-item {
        flex: 1;
        display: flex;
        align-items: center;
        
        .address-icon {
          font-size: 28rpx;
          margin-right: 15rpx;
        }
        
        .address-text {
          font-size: 26rpx;
          color: $text-dark;
          line-height: 1.4;
        }
      }
      
      .direction-btn {
        padding: 15rpx 25rpx;
        background: $primary-color;
        color: white;
        border-radius: 20rpx;
        font-size: 24rpx;
      }
    }
    
    .section-title {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: $text-dark;
      margin-bottom: 20rpx;
    }
    
    .contact-section {
      margin-bottom: 30rpx;
      
      .contact-card {
        display: flex;
        align-items: center;
        padding: 30rpx;
        background: #f8f9fa;
        border-radius: 16rpx;
        
        .contact-info {
          flex: 1;
          
          .contact-item {
            display: flex;
            
            .contact-label {
              font-size: 26rpx;
              color: $text-light;
              width: 120rpx;
            }
            
            .contact-value {
              font-size: 26rpx;
              color: $text-dark;
              font-weight: 500;
            }
          }
        }
        
        .contact-actions {
          .contact-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20rpx;
            background: $primary-color;
            color: white;
            border-radius: 16rpx;
            
            .contact-icon {
              font-size: 28rpx;
              margin-bottom: 5rpx;
            }
            
            .contact-text {
              font-size: 22rpx;
            }
          }
        }
      }
    }
    
    .features-section {
      margin-bottom: 30rpx;
      
      .features-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
        
        .feature-item {
          flex: 1;
          min-width: calc(50% - 10rpx);
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 30rpx 20rpx;
          background: #f8f9fa;
          border-radius: 16rpx;
          
          .feature-icon {
            font-size: 40rpx;
            margin-bottom: 15rpx;
          }
          
          .feature-text {
            font-size: 24rpx;
            color: $text-dark;
            text-align: center;
          }
        }
      }
    }
    
    .gallery-section {
      margin-bottom: 30rpx;
      
      .image-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 10rpx;
        
        .gallery-image {
          width: calc(33.33% - 7rpx);
          height: 200rpx;
          border-radius: 12rpx;
        }
      }
    }
    
    .rich-content {
      margin-bottom: 40rpx;
      
      :deep(.mp-html) {
        font-size: 28rpx;
        line-height: 1.8;
        color: $text-dark;
        
        img {
          max-width: 100%;
          border-radius: 12rpx;
          margin: 20rpx 0;
        }
        
        p {
          margin: 20rpx 0;
        }
      }
    }
  }
  
  .bottom-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: white;
    padding: 20rpx;
    box-shadow: 0 -4rpx 12rpx rgba(0,0,0,0.1);
    gap: 20rpx;
    
    .action-btn {
      flex: 1;
      padding: 24rpx;
      border-radius: 25rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: bold;
      
      &.primary {
        background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
        color: white;
      }
      
      &.secondary {
        background: #f0f0f0;
        color: $text-dark;
      }
    }
  }
}
</style> 
